import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
//创建一个vuex的实例  在Store方法里存放数据
const store = new Vuex.Store({
  state: {
    count: 0,
    monce: 0,
    username: "",
    isShow: false,
    gamelist: [
      {
        id: "0",
        name: "",
      },
    ],

    cartList: [
      {
        id: "0",
        name: "",
        price: "",

        count: "0",
      },
    ],

    //state是vuex中的数据源，需要的数据都保存在这里
    //在组件里通过this.$store.state来获取我们定义的数据
    //相当于组件里的data选项
  },
  mutations: {
    //同步变更
    addcz(state, num) {
      state.monce += num;
      console.log(state.monce);
    },
    addCount(state, num) {
      state.count += num;
    },
    redCount(state) {
      state.count--;
    },
    addCartses(state, objes) {
      state.gamelist.name = "";
      state.gamelist.map(x => x.name += objes.name);
    },

    addCarts(state, obj) {
      state.cartList.push({
        name: obj.name,
        price: obj.pricenew,
        img: obj.img,
        count: 0,
      });
    },
  },
  getters: {
    //可以实时监听state值的变化，这个变化是依赖state的值，可以被缓存
    //只有当它的依赖发生变化时，getters才可以调用其中的方法返回一个新的值
    //相当于组件中计算属性computed
    getCount(state) {
      if (state.count % 2 == 0) {
        return "偶数";
      } else {
        return "奇数";
      }
    },
  },
  actions: {
    //异步操作,执行的是mutation里的方法 ,axios请求数据是异步请求
    getAddCount(context, num) {
      context.commit("addCount", num);
    },
    getRedCount(context) {
      //定时器模拟网路请求
      setTimeout(() => {
        context.commit("redCount");
      }, 2000);
    },
  },
});
export default store;
//同步是没得到数据不下一步，异步是在未取得数据时依然可进行操作，最后得到数据即可
